<template>
  <!-- 已经没有用了 -->
    <div class="class-mg">
        <!-- 创建班级头部 -->
    <div class="create-class">
        <el-button @click="showModal=true">创建班级</el-button>
    </div>
    
    <!-- 班级信息表格 -->
     <span>我的班级:</span>
    <div >
        <el-table :data="ClassInfo" style="width: 100%">
          <el-table-column prop="classId" label="班级ID" width="100"></el-table-column>
          <el-table-column prop="className" label="班级名称" width="180"></el-table-column>
          <el-table-column prop="class_code" label="班级码" width="120"></el-table-column>
          <el-table-column prop="class_code" label="删除" >
          </el-table-column>
        </el-table>
     
    
    </div>
    
    
    </div>
    
    <!-- 创建班级弹窗 -->
    <n-modal v-model:show="showModal">
          <n-card style="width: 600px" title="创建班级" role="dialog" aria-modal="true">
            <!-- 分割线 -->
            <el-divider content-position="right">
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <!-- 关闭框 -->
            <template #header-extra>
              <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
            </template>
            <!-- 主要内容 -->
            <div class="alter">
              班级名称: <n-input type="text" placeholder="请输入班级名" maxlength="20" show-count clearable />
            </div>
            <!-- 提交按钮 -->
            <template #footer>
                <div style="display: flex;justify-content: flex-end;">
                <el-button @click="onUpClassData()">提交</el-button>
              </div>
            </template>
          </n-card>
        </n-modal>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import { StarFilled } from "@element-plus/icons-vue";
    import { Star } from "@element-plus/icons-vue";
    // 显示弹窗
    const showModal = ref(false)
    
    const ClassInfo =ref([{
        classId:1,
        className:"小小班",
        teacherId:2,
        class_code:"Adswd1gGf",
    },{
        classId:2,
        className:"大大班",
        teacherId:2,
        class_code:"Adssssswd1gGf",
    }])
    
    function onUpClassData(){
    
    }
    </script>
    
    <style scoped>
    .class-mg{
    display: flex;
    flex-direction: column;
    }
    .create-class{
        margin-bottom: 10px;
        height: 50px;
        background-color: rgba(163, 102, 102, 0.1);
    }
    
    
    /* 关闭弹窗键 */
    .deleye-img {
      transition: transform 0.3s ease;
      cursor: pointer;
    }
    .deleye-img:hover {
      transform: scale(1.2);
    }
    
    .Table_box{
      
    }
    
    .demonstration {
      color: var(--el-text-color-secondary);
    }
    
    
    </style>